<template>
  <a-spin :spinning="spinning">
    <div class="bg">
      <div class="box">
        <h3>{{ form.meetingName }}</h3>
        <a
          class="back"
          @click="handleClose"
        />
        <div class="left">
          <h5>所属单位：{{ form.unitName }}</h5>
          <h5>所属部门：{{ form.reserveDeptName }}</h5>
          <h5>会议地点：{{ form.meetingRoomString }}</h5>
          <h5>会议时间：{{ form.startTime }}</h5>
          <h6>请扫描右侧二维码进行会议签到<span /></h6>
        </div>
        <div class="right">
          <!-- //-{{form.etime}} -->
          <!-- <h4>{{ form.stime }}</h4> -->
          <VueQrcode
            class="code"
            :value="form.orCode"
            :options="{ width: 258 }"
          />
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script>
import { reservationScreen } from '@/api/office/anualConference/index'
import VueQrcode from '@chenfengyuan/vue-qrcode'
export default {
    components: {
        VueQrcode,
    },
    data() {
        return {
            spinning: false,
            form: {},
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.pageType = this.$route.query.pageType
            this.getScreen()
        }
    },
    methods: {
        getScreen() {
            this.spinning = true
            reservationScreen({ id: this.id }).then((res) => {
              this.spinning = false
                this.form = res.data
            }).catch(() => {
              this.spinning = false
            })
            // const [err, res] = await reservationScreen({ id: this.id })
            // this.spinning = false
            // if (!err) {
            // }
        },
        handleClose(){
              window.close()
        }
    },
}
</script>
<style lang="less" scoped>
.bg {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--heightVh);
    width: var(--widthVw);
    font-size: 0;
    overflow: hidden;
    background: url('~@/assets/conBg.jpg') center center;
    background-size: 100% 100%;
    .box {
        // background-image: radial-gradient(50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
        background-image: radial-gradient(at 50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
        border-radius: 20px;
        border-radius: 20px;
        width: 1400px;
        height: 730px;
        position: relative;
        h3 {
            font-family: PingFangSC-Semibold;
            font-size: 60px;
            color: #ffffff;
            letter-spacing: 0;
            width: 1100px;
            position: absolute;
            left: 100px;
            top: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .back {
            display: inline-block;
            width: 42px;
            height: 42px;
            position: absolute;
            top: 80px;
            right: 100px;
            background: url('~@/assets/back.png') center center;
        }
        .left {
            position: absolute;
            left: 100px;
            top: 225px;
            width: 55%;
            h5 {
                font-family: PingFangSC-Semibold;
                font-size: 32px;
                color: #ffffff;
                letter-spacing: 0;
            }
            h6 {
                font-family: PingFangSC-Semibold;
                font-size: 32px;
                color: #ffffff;
                margin-top: 80px;
                letter-spacing: 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                span {
                    display: inline-block;
                    height: 24px;
                    width: 28px;
                    margin-left: 18px;
                    background: url('~@/assets/go.png') center center;
                }
            }
        }
        .right {
            background: rgba(0, 0, 0, 0.6);
            border: 4px solid rgba(2, 137, 202, 0.5);
            border-radius: 20px;
            border-radius: 20px;
            position: absolute;
            width: 400px;
            height: 460px;
            top: 195px;
            right: 100px;
            display: flex;

            flex-direction: column;
            align-items: center;
            justify-content: center;
            h4 {
                font-family: PingFangSC-Semibold;
                font-size: 50px;
                color: #0289ca;
                letter-spacing: 0;
                margin-top: 50px;
            }
        }
    }
}
</style>